<template>
  <div class="app-container">
    <el-row :gutter="20" class="mb20">
      <el-col :span="6">
        <el-input type="text" v-model="req._reason_" placeholder="请输入调班原因" @change="search"></el-input>
      </el-col>
      <el-col :span="6">
        <el-button type="primary" icon="el-icon-search" @click="search">查询</el-button>
        <el-button type="success" icon="el-icon-plus" @click="add">新增</el-button>
      </el-col>
    </el-row>
    <!-- <el-tabs v-model="req.type" @tab-click="handleClick">
            <el-tab-pane label="临时调班" name="1"></el-tab-pane>
            <el-tab-pane label="固定调班" name="2"></el-tab-pane>
        </el-tabs> -->

    <el-table :data="tableData" border style="width: 100%">
      <el-table-column type="index" label="序号" width="60" align="center" show-overflow-tooltip>
        <template slot-scope="{$index}">
          {{ $index + 1 + (req.page - 1) * req.pageSize }}
        </template>
      </el-table-column>
      <el-table-column prop="targetMemberName" label="调班人员" width="120" align="left" show-overflow-tooltip></el-table-column>
      <el-table-column prop="reason" label="调班原因" min-width="120" align="left" show-overflow-tooltip></el-table-column>
      <el-table-column prop="replaceMemberName" label="顶班人员" min-width="120" align="left" show-overflow-tooltip></el-table-column>
      <el-table-column prop="replaceDay" label="调班日期" min-width="220" align="left" show-overflow-tooltip></el-table-column>
      <el-table-column label="操作" width="140" align="center">
        <template slot-scope="{ row }">
          <el-button @click="edit(row)" type="text" size="small">编辑</el-button>
          <el-button @click="del(row)" type="text" size="small">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <Pagination v-show="total" :total="total" :page.sync="req.page" :limit.sync="req.pageSize" @pagination="getList"></Pagination>

    <Edit :show.sync="showEdit" :item="currentItem" @confirm="search"></Edit>
  </div>
</template>
<script>
import Edit from "./components/edit.vue";
import { getList, del } from "@/api/classSwitch";
export default {
  components: { Edit },
  data() {
    return {
      tableData: [],
      total: 0,
      req: {
        type: "1",
        page: 1,
        pageSize: 20,
      },
      showEdit: false,
      currentItem: {},
    };
  },
  mounted() {
    this.getList();
  },
  methods: {
    search() {
      this.req.page = 1;
      this.getList();
    },
    async getList() {
      try {
        const res = await getList(this.req);
        this.tableData = res.data || [];
        this.total = res.total;
      } catch (error) {}
    },
    add() {
      this.currentItem = {};
      this.showEdit = true;
    },
    edit(row) {
      this.currentItem = structuredClone(row);
      this.showEdit = true;
    },
    del(row) {
      this.$modal
        .confirm("是否确认删除此记录")
        .then((res) => {
          return del({ id: row.id });
        })
        .then((res) => {
          this.$modal.msgSuccess("操作成功！");
          this.getList();
        });
    },
  },
};
</script>